<template>
  <div 
    ref="containerRef" 
    class="chat-view" 
    :class="layoutClass"
    :style="mobileStyles"
  >
    <!-- Mobile Header (only visible on mobile) -->
    <div class="mobile-header" v-if="isMobile">
      <div class="header-content">
        <button 
          class="menu-toggle"
          @click="toggleSidebar"
          v-if="currentView === 'chat'"
        >
          <i class="el-icon-s-fold" />
        </button>
        <h1 class="app-title" v-if="currentView === 'friends'">消息</h1>
        <h1 class="chat-title" v-if="currentView === 'chat' && currentConversation">
          {{ currentConversation.title }}
        </h1>
        <div class="header-actions">
          <ConnectionStatus 
            :show-indicator="true"
            :show-quality-indicator="false"
            :auto-hide="true"
          />
        </div>
      </div>
    </div>

    <!-- Main Layout Container -->
    <div class="layout-container">
      <!-- Left Sidebar - Friends List -->
      <div 
        class="sidebar"
        :class="{ 
          'sidebar--hidden': isMobile && currentView === 'chat',
          'sidebar--overlay': isMobile && showSidebar
        }"
        v-show="!isMobile || currentView === 'friends' || showSidebar"
      >
        <div class="sidebar-header" v-if="!isMobile">
          <div class="user-info">
            <div class="user-avatar">
              <AvatarImage 
                :src="currentUser?.avatar" 
                :alt="currentUser?.nickname || '用户'"
                size="medium"
              />
            </div>
            <div class="user-details">
              <h3 class="user-name">{{ currentUser?.nickname || '未登录' }}</h3>
              <p class="user-status">在线</p>
            </div>
          </div>
          <div class="header-actions">
            <button class="action-btn" @click="handleSettings" title="设置">
              <i class="el-icon-setting" />
            </button>
            <button class="action-btn" @click="handleLogout" title="退出">
              <i class="el-icon-switch-button" />
            </button>
          </div>
        </div>
        
        <div class="sidebar-content">
          <FriendList
            @friend-selected="handleFriendSelected"
            @conversation-changed="handleConversationChanged"
            @add-friend="handleAddFriend"
          />
        </div>
      </div>

      <!-- Main Content Area -->
      <div class="main-content">
        <!-- Chat Window -->
        <div 
          class="chat-area"
          v-show="!isMobile || currentView === 'chat'"
        >
          <ChatWindow
            :conversation-id="currentConversationId"
            @image-click="handleImageClick"
            @file-click="handleFileClick"
            @voice-click="handleVoiceClick"
            @more-actions="handleMoreActions"
          />
        </div>

        <!-- Empty State (when no conversation selected) -->
        <div 
          class="empty-state"
          v-if="!currentConversationId && (!isMobile || currentView === 'chat')"
        >
          <div class="empty-content">
            <div class="empty-icon">
              <i class="el-icon-chat-dot-round" />
            </div>
            <h3 class="empty-title">选择一个聊天开始对话</h3>
            <p class="empty-description">从左侧好友列表中选择一个好友开始聊天</p>
          </div>
        </div>
      </div>

      <!-- Right Panel (Desktop only) -->
      <div class="right-panel" v-if="isDesktop">
        <div class="panel-header">
          <h3>聊天信息</h3>
        </div>
        <div class="panel-content">
          <!-- Conversation Info -->
          <div class="conversation-info" v-if="currentConversation">
            <div class="info-section">
              <h4>聊天成员</h4>
              <div class="members-list">
                <div 
                  class="member-item"
                  v-for="participant in conversationParticipants"
                  :key="participant.id"
                >
                  <div class="member-avatar">
                    <img :src="participant.avatar || defaultAvatar" :alt="participant.nickname" />
                  </div>
                  <div class="member-info">
                    <span class="member-name">{{ participant.nickname }}</span>
                    <span class="member-status">{{ participant.status }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="info-section">
              <h4>聊天设置</h4>
              <div class="settings-list">
                <div class="setting-item">
                  <span class="setting-label">消息通知</span>
                  <el-switch v-model="notificationEnabled" />
                </div>
                <div class="setting-item">
                  <span class="setting-label">置顶聊天</span>
                  <el-switch v-model="conversationPinned" />
                </div>
              </div>
            </div>
          </div>

          <!-- Connection Status (Desktop) -->
          <div class="connection-section">
            <ConnectionStatus 
              :show-indicator="true"
              :show-quality-indicator="true"
              :auto-hide="false"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Mobile Navigation (bottom) -->
    <div class="mobile-nav" v-if="isMobile">
      <button 
        class="nav-item"
        :class="{ active: currentView === 'friends' }"
        @click="setCurrentView('friends')"
      >
        <i class="el-icon-user" />
        <span>好友</span>
      </button>
      <button 
        class="nav-item"
        :class="{ active: currentView === 'chat' }"
        @click="setCurrentView('chat')"
        :disabled="!currentConversationId"
      >
        <i class="el-icon-chat-dot-round" />
        <span>聊天</span>
        <div class="nav-badge" v-if="totalUnreadCount > 0">
          {{ totalUnreadCount > 99 ? '99+' : totalUnreadCount }}
        </div>
      </button>
    </div>

    <!-- Mobile Sidebar Overlay -->
    <div 
      class="sidebar-overlay"
      v-if="isMobile && showSidebar"
      @click="closeSidebar"
    ></div>

    <!-- Image Preview Modal -->
    <el-dialog
      v-model="showImagePreview"
      :show-close="true"
      :close-on-click-modal="true"
      width="90%"
      class="image-preview-dialog"
    >
      <img :src="previewImageUrl" alt="图片预览" class="preview-image" />
    </el-dialog>

    <!-- Add Friend Dialog -->
    <AddFriendDialog
      v-model="showAddFriendDialog"
      @friend-request-sent="handleFriendRequestSent"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import { useConversationsStore } from '@/stores/conversations'
import { useFriendsStore } from '@/stores/friends'
import { useMobileInteraction } from '@/composables/useMobileInteraction'
import { APP_CONSTANTS } from '@/utils/constants'
import ChatWindow from '@/components/ChatWindow.vue'
import FriendList from '@/components/FriendList.vue'
import ConnectionStatus from '@/components/ConnectionStatus.vue'
import AvatarImage from '@/components/AvatarImage.vue'
import AddFriendDialog from '@/components/AddFriendDialog.vue'
import type { Friend, Conversation, UserInfo } from '@/types'

// Composables
const router = useRouter()
const authStore = useAuthStore()
const conversationsStore = useConversationsStore()
const friendsStore = useFriendsStore()
// Container ref for mobile interactions
const containerRef = ref<HTMLElement>()

// Mobile interaction composable
const mobileInteraction = useMobileInteraction(containerRef, {
  enableSwipeGestures: true,
  enableVirtualKeyboard: true,
  optimizeTouchTargets: true,
  enableHapticFeedback: true,
  swipeThreshold: 50,
  touchTargetMinSize: 44
})

const { 
  isMobile, 
  isTablet, 
  isDesktop, 
  isMobileDevice,
  shouldOptimizeForTouch,
  isKeyboardVisible,
  keyboardHeight,
  keyboardAdjustment,
  onSwipe,
  onOrientationChange,
  optimizeTouchTarget,
  handleInputFocus,
  applySafeAreaInsets,
  optimizeScrolling
} = mobileInteraction

// Reactive state
const currentView = ref<'friends' | 'chat'>('friends')
const showSidebar = ref(false)
const showImagePreview = ref(false)
const previewImageUrl = ref('')
const showAddFriendDialog = ref(false)
const notificationEnabled = ref(true)
const conversationPinned = ref(false)


// Computed properties
const currentUser = computed(() => authStore.currentUser)
const currentConversationId = computed(() => conversationsStore.currentConversationId)
const currentConversation = computed(() => {
  if (!currentConversationId.value) return null
  return conversationsStore.getConversationById(currentConversationId.value)
})

const conversationParticipants = computed(() => {
  if (!currentConversation.value) return []
  // This would need to be implemented based on your data structure
  return [] // Placeholder
})

const totalUnreadCount = computed(() => {
  return conversationsStore.totalUnreadCount
})

const layoutClass = computed(() => {
  return {
    'layout-mobile': isMobile.value,
    'layout-tablet': isTablet.value,
    'layout-desktop': isDesktop.value,
    'sidebar-open': showSidebar.value,
    'keyboard-visible': isKeyboardVisible?.value,
    'touch-optimized': shouldOptimizeForTouch.value
  }
})

// Mobile-specific styles
const mobileStyles = computed(() => {
  const styles: Record<string, string> = {}
  
  // Adjust for virtual keyboard
  if (isKeyboardVisible?.value && keyboardAdjustment.value > 0) {
    styles.paddingBottom = `${keyboardAdjustment.value}px`
  }
  
  // Apply safe area insets on mobile
  if (isMobileDevice.value) {
    styles.paddingTop = 'env(safe-area-inset-top)'
    styles.paddingLeft = 'env(safe-area-inset-left)'
    styles.paddingRight = 'env(safe-area-inset-right)'
    if (!isKeyboardVisible?.value) {
      styles.paddingBottom = 'env(safe-area-inset-bottom)'
    }
  }
  
  return styles
})

// Methods
const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value
}

const closeSidebar = () => {
  showSidebar.value = false
}

const setCurrentView = (view: 'friends' | 'chat') => {
  currentView.value = view
  if (view === 'friends') {
    showSidebar.value = false
  }
}

const handleFriendSelected = (friend: Friend) => {
  if (isMobile.value) {
    setCurrentView('chat')
  }
}

const handleConversationChanged = (conversationId: string) => {
  // Conversation is already set by FriendList component
  if (isMobile.value) {
    setCurrentView('chat')
  }
}

const handleAddFriend = () => {
  showAddFriendDialog.value = true
}

const handleFriendRequestSent = (user: UserInfo) => {
  ElMessage.success(`已向 ${user.nickname || user.username} 发送好友请求`)
  // 可以在这里添加其他逻辑，比如刷新好友列表等
}

const handleImageClick = (imageUrl: string) => {
  previewImageUrl.value = imageUrl
  showImagePreview.value = true
}

const handleFileClick = (fileUrl: string, fileName: string) => {
  // TODO: Implement file download
  ElMessage.info(`下载文件: ${fileName}`)
}

const handleVoiceClick = (voiceUrl: string) => {
  // TODO: Implement voice playback
  ElMessage.info('语音播放功能待实现')
}

const handleMoreActions = () => {
  // TODO: Implement more actions menu
  ElMessage.info('更多操作功能待实现')
}

const handleSettings = () => {
  // TODO: Implement settings
  ElMessage.info('设置功能待实现')
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '确认退出', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await authStore.logout()
    router.push('/login')
  } catch (error) {
    // User cancelled
  }
}



// Watch for screen size changes
watch([isMobile, isTablet, isDesktop], () => {
  // Reset mobile-specific state when switching to larger screens
  if (!isMobile.value) {
    showSidebar.value = false
    if (currentConversationId.value) {
      currentView.value = 'chat'
    }
  }
})

// Watch for conversation changes on mobile
watch(currentConversationId, (newId) => {
  if (newId && isMobile.value) {
    setCurrentView('chat')
  }
})

// Mobile interaction setup
const setupMobileInteractions = () => {
  if (!containerRef.value) return

  // Setup swipe gestures for mobile navigation
  const unsubscribeSwipe = onSwipe('navigation', (swipe) => {
    if (!isMobile.value) return
    
    // Swipe right to open sidebar (when in chat view)
    if (swipe.direction === 'right' && currentView.value === 'chat' && swipe.distance > 100) {
      if (!showSidebar.value) {
        showSidebar.value = true
      }
    }
    
    // Swipe left to close sidebar
    if (swipe.direction === 'left' && showSidebar.value && swipe.distance > 100) {
      showSidebar.value = false
    }
    
    // Swipe left to go to chat view (when in friends view and conversation selected)
    if (swipe.direction === 'left' && currentView.value === 'friends' && currentConversationId.value) {
      setCurrentView('chat')
    }
    
    // Swipe right to go back to friends view (when in chat view)
    if (swipe.direction === 'right' && currentView.value === 'chat' && !showSidebar.value) {
      setCurrentView('friends')
    }
  })

  // Setup orientation change handling
  const unsubscribeOrientation = onOrientationChange(() => {
    // Close sidebar on orientation change to prevent layout issues
    if (showSidebar.value) {
      showSidebar.value = false
    }
    
    // Adjust layout after orientation change
    setTimeout(() => {
      if (containerRef.value) {
        applySafeAreaInsets(containerRef.value, {
          top: true,
          bottom: !isKeyboardVisible?.value,
          left: true,
          right: true
        })
      }
    }, 100)
  })

  // Optimize touch targets for mobile buttons
  const optimizeButtons = () => {
    if (!shouldOptimizeForTouch.value) return

    const buttons = containerRef.value?.querySelectorAll('button, .nav-item, .action-btn, .menu-toggle')
    buttons?.forEach((button) => {
      optimizeTouchTarget(button as HTMLElement, {
        minSize: 44,
        hapticFeedback: true,
        preventDoubleClick: true
      })
    })
  }

  // Setup scrolling optimization
  const optimizeScrollElements = () => {
    const scrollElements = containerRef.value?.querySelectorAll('.sidebar-content, .chat-area, .panel-content')
    scrollElements?.forEach((element) => {
      optimizeScrolling(element as HTMLElement)
    })
  }

  // Apply optimizations
  setTimeout(() => {
    optimizeButtons()
    optimizeScrollElements()
  }, 100)

  // Return cleanup function
  return () => {
    unsubscribeSwipe()
    unsubscribeOrientation()
  }
}

// Lifecycle
onMounted(() => {
  // Set initial view based on screen size
  if (isMobile.value) {
    currentView.value = 'friends'
  } else if (currentConversationId.value) {
    currentView.value = 'chat'
  }

  // Setup mobile interactions
  const cleanupMobileInteractions = setupMobileInteractions()

  // Apply safe area insets for mobile
  if (isMobileDevice.value && containerRef.value) {
    applySafeAreaInsets(containerRef.value, {
      top: true,
      bottom: !isKeyboardVisible?.value,
      left: true,
      right: true
    })
  }

  // Cleanup on unmount
  onUnmounted(() => {
    cleanupMobileInteractions?.()
  })
})
</script>

<style lang="scss" scoped>
.chat-view {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  overflow: hidden;
}

.mobile-header {
  display: none;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  z-index: 100;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;

    .menu-toggle {
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #666;
      font-size: 18px;

      &:hover {
        background: #f5f5f5;
      }
    }

    .app-title,
    .chat-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
      flex: 1;
      text-align: center;
    }

    .header-actions {
      display: flex;
      align-items: center;
    }
  }
}

.layout-container {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  width: 300px;
  background: #fff;
  border-right: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;

  .sidebar-header {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user-info {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;

      .user-avatar {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .user-details {
        flex: 1;
        min-width: 0;

        .user-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin: 0 0 2px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .user-status {
          font-size: 12px;
          color: #52c41a;
          margin: 0;
        }
      }
    }

    .header-actions {
      display: flex;
      gap: 8px;

      .action-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #666;
        transition: all 0.2s;

        &:hover {
          background: #f5f5f5;
          color: #333;
        }
      }
    }
  }

  .sidebar-content {
    flex: 1;
    overflow: hidden;
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;

  .empty-content {
    text-align: center;
    max-width: 400px;
    padding: 40px 20px;

    .empty-icon {
      font-size: 64px;
      color: #d9d9d9;
      margin-bottom: 24px;
    }

    .empty-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin: 0 0 12px 0;
    }

    .empty-description {
      font-size: 14px;
      color: #999;
      margin: 0;
      line-height: 1.5;
    }
  }
}

.right-panel {
  width: 280px;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;

  .panel-header {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }

  .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    .info-section {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      h4 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 0 0 12px 0;
      }

      .members-list {
        .member-item {
          display: flex;
          align-items: center;
          padding: 8px 0;

          .member-avatar {
            width: 32px;
            height: 32px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              object-fit: cover;
            }
          }

          .member-info {
            flex: 1;

            .member-name {
              display: block;
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }

            .member-status {
              display: block;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }

      .settings-list {
        .setting-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          .setting-label {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }

    .connection-section {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid #f0f0f0;
    }
  }
}

.mobile-nav {
  display: none;
  height: 60px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 0 16px;

  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    position: relative;
    transition: color 0.2s;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &.active {
      color: #007aff;
    }

    i {
      font-size: 20px;
      margin-bottom: 4px;
    }

    .nav-badge {
      position: absolute;
      top: 4px;
      right: 50%;
      transform: translateX(50%);
      background: #ff4d4f;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      min-width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

// Layout-specific styles
.layout-mobile {
  .mobile-header {
    display: block;
  }

  .mobile-nav {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 60px;
    width: 280px;
    z-index: 1000;
    transform: translateX(-100%);

    &--overlay {
      transform: translateX(0);
    }

    &--hidden {
      display: none;
    }
  }

  .main-content {
    margin-top: 0;
  }
}

.layout-tablet {
  .sidebar {
    width: 280px;
  }

  .right-panel {
    display: none;
  }
}

.layout-desktop {
  .sidebar {
    width: 300px;
  }

  .right-panel {
    width: 280px;
  }
}

// Image preview dialog
:deep(.image-preview-dialog) {
  .el-dialog__body {
    padding: 0;
    text-align: center;
  }

  .preview-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
  }
}

// Mobile-specific optimizations
.touch-optimized {
  // Optimize touch interactions
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  
  // Improve scrolling performance
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  
  // Prevent zoom on double tap
  touch-action: manipulation;
  
  // Smooth scrolling
  scroll-behavior: smooth;
  
  // Optimize button touch targets
  button, .nav-item, .action-btn, .menu-toggle {
    min-height: 44px;
    min-width: 44px;
    position: relative;
    
    // Add touch feedback
    &:active {
      transform: scale(0.95);
      transition: transform 0.1s ease;
    }
    
    // Expand touch area for small buttons
    &::before {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      z-index: -1;
    }
  }
  
  // Optimize scrollable areas
  .sidebar-content, .chat-area, .panel-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }
}

// Virtual keyboard adjustments
.keyboard-visible {
  .mobile-nav {
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  
  .chat-area {
    padding-bottom: 0;
  }
  
  // Adjust layout when keyboard is visible
  .layout-container {
    height: calc(100vh - 56px);
    overflow: hidden;
  }
}

// Orientation-specific styles
@media screen and (orientation: landscape) {
  .layout-mobile {
    .mobile-header {
      height: 48px;
      
      .header-content {
        padding: 0 12px;
        
        .menu-toggle {
          width: 36px;
          height: 36px;
        }
        
        .app-title, .chat-title {
          font-size: 16px;
        }
      }
    }
    
    .mobile-nav {
      height: 50px;
      
      .nav-item {
        i {
          font-size: 18px;
          margin-bottom: 2px;
        }
        
        span {
          font-size: 11px;
        }
      }
    }
    
    .sidebar {
      top: 48px;
      bottom: 50px;
    }
  }
}

// Safe area support
@supports (padding: max(0px)) {
  .chat-view {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    
    &.layout-mobile {
      .mobile-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-top: env(safe-area-inset-top);
      }
      
      .mobile-nav {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: env(safe-area-inset-bottom);
      }
      
      .sidebar {
        left: env(safe-area-inset-left);
      }
    }
  }
}

// High DPI display optimizations
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .touch-optimized {
    // Sharper borders on high DPI displays
    .sidebar, .mobile-header, .mobile-nav {
      border-width: 0.5px;
    }
  }
}

// Responsive breakpoints
@media (max-width: 767px) {
  .chat-view {
    &.layout-mobile {
      .sidebar {
        &:not(.sidebar--overlay) {
          transform: translateX(-100%);
        }
      }
    }
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .chat-view {
    &.layout-tablet {
      .mobile-header,
      .mobile-nav {
        display: none;
      }
    }
  }
}

@media (min-width: 1024px) {
  .chat-view {
    &.layout-desktop {
      .mobile-header,
      .mobile-nav {
        display: none;
      }
    }
  }
}
</style>